<template>
    <div>
        <div class="search">
            <span class="iconfont">&#xe688;</span>
            <input 
                type="text" 
                class="search-input" 
                placeholder="请输入城市名称：北京或beijing" 
                v-model="keyword"
                :class="[changeSearch]"
            >
            <button 
                class="button" 
                :class="[changeButton]" 
                @click="buttonClear()"
            >取消</button>
            <span 
                class="cancel"
                :class="[changeSymbol]"
                @click="xClear()"
            >X</span>
        </div>
        <div 
            class="search-content" 
            v-show="this.list.length"
            ref="contentWrapper"
            >
            <ul>
                <li class="search-first">{{this.show}}</li>
                <li 
                    class="search-item"
                    v-for="item of this.list"
                    :key="item.id"
                    @click="handleItemClick(item.name)"
                    >{{item.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
// 引入better-scroll 解决滚动问题
import BScroll from 'better-scroll'
// 引入汉字转码封装的函数
import {disreslove} from '../../../utils/utils'
export default {
    name: 'locationHeader',
    props:{
        cities: Object
    },
    data(){
        return{
            // 通过对input搜索框的数据双向绑定，来检测搜索数据的变化,定义变量
            keyword: '',
            changeSearch: '', //定义动态绑定的样式
            changeButton: '',
            changeSymbol: '',
            show: '请输入城市名称：北京或beijing',
            flag: '1', //内容为空时的区分标志位
            iLetter: '',
            iWord: '',
            list:[]
        }
    },
    // 对input搜索框进行数据动态监听
    watch:{
        // 对keyword进行监听，并添加对应的类,在输入时进行动态监听
        keyword(){
            // 去除输入框keyword中的无效空格
            let content =this.keyword.trim()
            // 调用addClass函数,添加样式
            this.addClass()
            // 逻辑判断
            if(content === ''){ 
                //判断输入框中内容是否为空
                /**
                 *  1代表：本身没有任何输入或者逐字清除
                 *  2代表：点击清空按钮
                 *  其它： 代表点击x按钮
                 */
                if(this.flag === '1'){
                    this.removeBack()
                }else if(this.flag === '2'){
                    this.keyword = ''
                    this.removeBack()
                }else{
                    this.keyword = ''
                    this.show=''
                }
            }else if(/^[0-9]+$/.test(content)){ 
                //判断输入框内容是否为数字
                this.showError(content)
            }else if(/^[a-zA-Z]+$/.test(content)){ 
                //判断输入内容是否为字母
                    // 无论用户输入大写还是小写，都给转化成小写字母，去搜索
                this.searchAlph(content)
            }else if(/^[\u4e00-\u9fa5]+$/.test(content)){ 
                //判断输入内容是否为汉字
                const result=[] //临时存储空间
                for(let i in this.cities){
                    // 输入内容首字母截取,大小写转化，并与字母表进行比对
                        //需要将汉字转换成拼音
                    let havaAlph=i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))> -1
                    if(havaAlph){
                        this.cities[i].forEach((value)=>{
                            if(value.name.indexOf(content)>-1){
                                result.push(value)
                                this.list=result
                            }else if(content.indexOf(value.name)>-1){
                                this.show='对不起，找不到：'+' '+content
                            }else{
                                this.loopWord(content)
                                //将输入的内容和找出来的内容进行循环比对    
                                if(!(this.iWord.indexOf(content.substr(content.length-1,1))>-1)){
                                    this.show='对不起，找不到：'+' '+content
                                    this.iWord=''
                                }
                            }
                        })
                    }else if(content.substr(0,1)==='u'||content.substr(0,1)==='i'||content.substr(0,1)==='v'||content.substr(0,1)==='o'){
                        this.show='对不起，找不到：'+' '+content
                        this.list=['']
                    }
                }
            }else{
                // 其它输入内容时
                this.showError(content)

            }
        }
    },
    // function域,通过定义方法来进行属性的修改,或者返回
    methods:{
        // 新增样式函数
        addClass(){
            this.changeSearch="changeSearch"
            this.changeButton="changeButton"
            this.changeSymbol="changeSymbol"
        },
        // 清除样式函数
        removeClass(){
            this.changeSearch=""
            this.changeButton=""
            this.changeSymbol=""
        },
        // 还原原来的样式
        removeBack(){
            this.removeClass()
            this.list=[]
            this.show=''
        },
        // 为取消按钮添加点击事件
        buttonClear(){
            // 小技巧：通过给keyword一个空格来触发 keyword()
            this.keyword=' '
            this.flag='2'
        },
        // 为X按钮添加点击事件
        xClear(){
            this.keyword=' '
            this.flag='其它标志位'
            this.show='请输入城市名称：北京或beijing'
        },
        // 搜索输入框，输入错误时提示
        showError(content){
            this.list=['']
            this.show='对不起，找不到：'+' '+content
        },
        // 将输入的英文内容循环比对
        loopAlphabet(lowerContent){
            let citiesWapper=this.cities
            for(let i in citiesWapper){
                let errArrs=[]  //存储错误位信息
                if(i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
                    citiesWapper[i].forEach((value)=>{
                        errArrs.push(value.spell.substr(lowerContent.length-1,1))
                        // 利用es6里的set函数去掉重复的数据
                        let errArr=[...new Set(errArrs)]
                        // 将数组转换成字符串并保存到变量里
                        this.iLetter=errArr.toString()
                    })
                }
            }
        },
        // 将输入的汉字内容进行转化并进行比对
        loopWord(content){
            let citiesWapper=this.cities
            for(let i in citiesWapper){
                let errArrs=[]  //存储错误位信息
                if(i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
                    citiesWapper[i].forEach((value)=>{
                        errArrs.push(value.name.substr(content.length-1,1))
                        // 利用es6里的set函数去掉重复的数据
                        let errArr=[...new Set(errArrs)]
                        // 将数组转换成字符串并保存到变量里
                        this.iWord=errArr.toString()
                    })
                }
            }
        },
        // 判断输入内容是否为字母
        searchAlph(content){
            const lowerContent=content.toLowerCase()
            const result=[] //临时存储空间
            for(let i in this.cities){
                // 输入内容首字母截取,大小写转化，并与字母表进行比对
                let havaAlph=i.toLowerCase().indexOf(lowerContent.substr(0,1))> -1
                if(havaAlph){
                    this.cities[i].forEach((value)=>{
                        if(value.spell.indexOf(lowerContent)>-1){
                            result.push(value)
                            this.list=result
                        }else if(lowerContent.indexOf(value.spell)>-1){
                            this.show='对不起，找不到：'+' '+content
                        }else{
                            this.loopAlphabet(lowerContent)
                            //将输入的内容和找出来的内容进行循环比对    
                            if(!(this.iLetter.indexOf(lowerContent.substr(lowerContent.length-1,1))>-1)){
                                this.show='对不起，找不到：'+' '+content
                                this.iLetter=''
                            }
                        }
                    })
                }else if(
                    lowerContent.substr(0,1)==='u'||lowerContent.substr(0,1)==='i'||
                    lowerContent.substr(0,1)==='v'||lowerContent.substr(0,1)==='o' 
                ){
                    this.show='对不起，找不到：'+' '+content
                    this.list=['']
                }
            }
        },
        // 点击搜索列表中的数据，携带信息并跳回首页
        handleItemClick(city){
            this.$store.dispatch('change',city)
            this.$router.push('/')
        }      
    },
    mounted(){
        this.scroll = new BScroll(
        this.$refs.contentWrapper,{
            click:true,
            mouseWheel:{
            speed: 20,
            invert: false,
            easeTime: 300
            }
        })
  }
}
</script>

<style lang="stylus" scoped>
.search
  position:relative
  height:.72rem
  background:#e0e4ec
  padding:.2rem
  .iconfont
    position:absolute
    top:.4rem
    left:.4rem
    color:#666
  .search-input
    height:.72rem
    line-height:.72rem
    width:100%
    text-align:left
    box-sizing:border-box
    padding-left:.6rem
    border-radius:.06rem
    color:#666
  .changeSearch
    width:88%
    margin-right:.1rem
  .button
    display:none
  .changeButton
    display:block
    color:#888
    font-weight:bold
    position:absolute
    top:.29rem
    right:.22rem
    z-index:101
    font-size:.35rem
    text-align:center
  .cancel
    display:none
  .changeSymbol
    display:block
    position:absolute
    top:.32rem
    right:1.3rem
    color:#fff
    z-index:101
    background:#ccc
    padding:.12rem
    border-radius:.2rem
.search-content
  overflow:hidden
  position:absolute
  z-index:101
  top:1.1rem
  left:0
  right:0
  bottom:0
  background:#eee
  .search-first
    line-height:.22rem
    padding:.1rem
    margin-bottom:.06rem
    color:#666
    background:#fff
    font-size:.1rem
    color:#aaa
  .search-item
    line-height:.82rem
    padding-left:.2rem
    margin-bottom:.06rem
    color:#666
    background:#fff
</style>
